// 1. 导入所需模块
import Vue from 'vue'
import VueRouter from 'vue-router'


// 导入子组件
import MyHome from '@/components/MyHome'
import MyMovie from '@/components/MyMovie'
import MyMusic from '@/components/MyMusic'
import MyAbout from '@/components/MyAbout'

import AboutMe from '@/components/AboutMe'
import AboutYou from '@/components/AboutYou'
import NotFound from '@/components/NotFound'
// 2. 调用 Vue.use() 函数，将 VueRouter 安装为 Vue 的插件
Vue.use(VueRouter)

// 3. 创建路由的实例对象
const router = new VueRouter({
  //写路由规则,(hash地址---->要展示的组件  对应关系)
  // mode: 'history',//配置成历史模式
  routes: [
    { path: '/', redirect: '/home' },
    //重定向,当访问/的时候,hash地址转为/home
    { name: 'home', path: '/home', component: MyHome },
    { name: 'movie', path: '/movie/:id/:name', component: MyMovie },
    { name: 'music', path: '/music', component: MyMusic },
    {
      name: 'about', path: '/about', component: MyAbout, children: [
        // children里边的path不能再使用 /了,最终的结果是父子hash地址凭借的结果
        { name: 'you', path: 'me', component: AboutMe },
        { name: 'me', path: 'you', component: AboutYou },

      ]
    },
    // 针对访问错误,给出404提示
    { path: '*', component: NotFound },
  ]
})

// 4. 导出路由的实例对象
export default router